<template>
		<el-container class="body-container">
				<el-header class="home-header">
						<div class="header-title" @click="goHome">微人事</div>
						<el-dropdown @command="commandHandler">
								<span class="el-dropdown-link">
											{{ bjTime }}
												<img :src="user.userface">
													{{ user.name }}
										</span>
								<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
										<el-dropdown-item command="setting">设置</el-dropdown-item>
										<el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
								</el-dropdown-menu>
						</el-dropdown>
				</el-header>

				<el-container class="home-container">

						<!--使用el-scrollbar 要指定父容器的高度-->
						<el-aside width="200px" class="main-aside">
								<el-menu
												class="el-menu-vertical-demo"
												:router="true"
												:unique-opened="true"
												:default-active="activePath"
								>
										<!--this.$router.options.routes 获取路由表里面所有的路由-->
										<el-submenu :index="index+''" v-for="(item,index) in router" :key="index"
																						v-if="!item.hidden">
												<template slot="title">
														<i style="color:#74bbeb;" :class="item.iconCls"></i>
														<span>{{ item.name }}</span>
												</template>
												<el-menu-item :index="child.path" v-for="(child,cindex) in item.children" :key="cindex">
														<template slot="title">
																<i style="color:#74bbeb;" :class="child.iconCls"></i>
																{{ child.name }}
														</template>
												</el-menu-item>
										</el-submenu>
								</el-menu>
						</el-aside>

						<!--主内容 容器-->
						<el-container class="mian-container">
								<el-main>
										<el-scrollbar class="main-scrollbar">
												<el-card class="box-card">
														<!--						面包屑						-->
														<el-breadcrumb separator=">" v-if="currentRoute.path !== '/home'">
																<el-breadcrumb-item :to="{ path: '/home'}">首页
																</el-breadcrumb-item>
																<el-breadcrumb-item :to="{ path: currentRoute.path}">{{ currentRoute.name }}
																</el-breadcrumb-item>
														</el-breadcrumb>
														<div v-show="currentRoute.path === '/home'"
																			style="text-align: center;font-family: 华文隶书;font-size: 90px;color: #74bbeb">
																欢迎来到微人事
														</div>
														<!--子路由视图-->
														<router-view></router-view>
												</el-card>
										</el-scrollbar>
								</el-main>
						</el-container>
				</el-container>
		</el-container>

</template>

<script>

export default {
		name: "Home",
		data() {
				let time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
				let userInfo = window.sessionStorage.getItem("user");
				return {
						user: JSON.parse(userInfo),
						bjTime: time
				}
		},

		created() {
				const refreshTime = setInterval(() => {
						this.bjTime = this.$dayjs().format('YYYY-MM-DD HH:mm:ss')
				}, 1000)
		},

		computed: {
				// 在store中拿到路由表数据
				router: {
						get() {
								return this.$store.state.routes
						},
						set(val) {

						}
				},
				// 获取当前路由
				currentRoute() {
						return this.$route;
				},
				// 默认激活的菜单
				activePath() {
						return this.$store.state.activePath;
				}
		},

		methods: {
				goHome() {
						this.$router.replace("/home")
						this.$get("/currentUser").then(res => {
								console.log(res)
						})
				},
				commandHandler(cmd) {
						if (cmd === 'logout') {
								this.$confirm('此操作将注销登录, 是否继续?', '提示', {
										confirmButtonText: '确定',
										cancelButtonText: '取消',
										type: 'warning'
								}).then(() => {
										this.$store.dispatch("logOut").then(res => {
												location.reload()// 确保清空路由表
										})
								}).catch(() => {
										this.$message({
												type: 'info',
												message: '取消操作'
										});
								});
						}
				}
		},
}
</script>

<style lang="less" scoped>
.el-scrollbar__wrap {
		overflow-x: hidden !important;
}

.body-container {
		height: 100%;

		.home-header {
				line-height: 60px;
				background-color: #74bbeb;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header-title {
						font-size: 30px;
						font-family: 华文隶书;
				}

				.el-dropdown-link {
						height: 100%;
						display: flex;
						align-items: center;
						color: #090909;

						img {
								height: 50px;
								width: 50px;
								border-radius: 50%;
								margin: 0 10px;

						}
				}
		}

		.home-container {
				height: calc(100% - 60px);

				.home-scroll {
						height: 100%;
						width: 10%;
				}

				.mian-container {
						height: 100%;
						background-color: #e0e0e0;
						width: 90%;

						.main-scrollbar {
								width: 100%;
								height: 100%;

								.box-card {
										margin-top: 0px;
								}
						}
				}
		}
}
</style>
